[Swift] 簡単に、かっこいいアニメーションアラートが表示できる、SCLAlertViewについて

[Swift] 簡単に、かっこいいアニメーションアラートが表示できる、SCLAlertViewについて

Clock Icon2016.03.16

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

1 はじめに

SCLAlertViewは、Swiftで書かれた、アニメーションアラートビューで、UIAlertControllerの代わりに使用することができます。

SCLAlertViewは、MITライセンスで公開されており、CocoaPodで簡単にインストールが可能です。

pod 'SCLAlertView'

(※Swiftのライブラリなので、use_frameworks!の行を有効にする必要があります。)
参考:CocoaPodsによる、外部ライブラリの利用と作成

なお、2016年3月現在、最新は、0.5.1です。

ライブラリの導入後は、下記のインポートで利用可能になります。

import SCLAlertView

2 使用方法

(1) 最初のサンプル

もっとも、簡単な利用方法は次の通りです。

SCLAlertView().showInfo("infomation", subTitle: "subTitle")

そして、動作している様子です。これが、デフォルトの動きになります。

001

(2) スタイル

最初に使用した、showInfoの他にも、全部で5種類のスタイルが利用可能です。

SCLAlertView().showError("Hello Error", subTitle: "This is a more descriptive error text.") // Error
SCLAlertView().showNotice("Hello Notice", subTitle: "This is a more descriptive notice text.") // Notice
SCLAlertView().showWarning("Hello Warning", subTitle: "This is a more descriptive warning text.") // Warning
SCLAlertView().showInfo("Hello Info", subTitle: "This is a more descriptive info text.") // Info
SCLAlertView().showEdit("Hello Edit", subTitle: "This is a more descriptive info text.") // Edit
SCLAlertView().showWait("Hello Wait", subTitle: "This is a more descriptive info text.") // Wait

それぞれ、色やシンボルマークが違います。

002 003 004 005 006 011

(3) パラメータ指定

パラメータで、各項目を詳しく設定できます。特に、duration:に0以外を設定すると、指定時間(秒)経過後に、自動的に閉じると言う動作になります。

SCLAlertView().showTitle(
            "Congratulations", // タイトル
            subTitle: "Operation successfully completed.", // サブタイトル
            duration: 2.0, // 2.0秒ごに、自動的に閉じる(OKでも閉じることはできる)
            completeText: "OK", // クローズボタンのタイトル
            style: .Success, // スタイル(Success)指定
            colorStyle: 0x000088, // ボタン、シンボルの色
            colorTextButton: 0xFFFF00 // ボタンの文字列の色
        )

007

(4) 選択後の処理

選択後の処理は、別のメソッドを指定することも、ブロックとして記述することも可能です。

@IBAction func tapShowButton(sender: AnyObject) {

    let alertView = SCLAlertView()
    alertView.addButton("First Button", target:self, selector:Selector("firstButton"))
    alertView.addButton("Second Button") {
        print("Second button tapped")
    }
    alertView.showSuccess("Button View", subTitle: "This alert view has buttons")
}

func firstButton() {
    print("First Button tapped")
}

008

(5) ボタンの無いポップアップ

クローズのボタンを表示しないことも可能です。

この場合、どこかでクローズする処理を記述しないと、閉じることができないポップアップとなってしまいます。 下記の例では、duration:を使用して、2秒後に自動的に閉じるように設定しました。

let alertView = SCLAlertView()
alertView.showCloseButton = false
alertView.showSuccess("Infomation", subTitle: "To display a little bit of time, the message",duration: 2.0)

009

(6) テキスト入力

ボタンの他に、テキストボックスも追加できます。

let alert = SCLAlertView()
let txt = alert.addTextField("Enter your name")
alert.addButton("Show Name") {
    print("Text value: \(txt.text)")
}
alert.showEdit("Edit View", subTitle: "This alert view shows a text box")

010

3 Objective-C版

SCLAlertViewは、Swiftで書かれたものですが、Objective-Cに移植したものもあります。

こちらは、下記のように指定して、Cocoapodsで組み込めます。

pod 'SCLAlertView-Objective-C'

ほとんど同じですが、少しだけ、Swift版と違った部分をあります。 詳しくは、下記のドキュメントをご参照ください。
https://github.com/dogo/SCLAlertView(Objective-C)

4 最後に

非常に簡単にかっこいいアニメーションアラート表示が可能です。 しかし、悪い意味ではありませんが、独特の雰囲気を醸し出すので、他のUIとの調和も大事になってくると思います。

ドキュメントでは、iOS8後のUIAlertViewUIAlertControllerの問題も、これで解決できると案内されており、iOS7に対応したSwiftのプロジェクトがある場合は、選択の一つになるかも知れません。

5 参考資料


https://github.com/dogo/SCLAlertView(Objective-C)
https://github.com/vikmeup/SCLAlertView-Swift
https://cocoapods.org/pods/SCLAlertView
SCLAlertViewをキーボードの高さ文ずらす

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.